<template>
    <div class="person">
      <h1>中国</h1>
      <h2 ref="title">北京</h2>
      <button @click="show">点我输出h2这个元素</button>
    </div>
</template>

<script setup name="Person">
    import {ref} from "vue";

    let title = ref()

    function show() {
      console.log(title.value)
    }

    let name = ref('张三')
    let age = ref(18)
    // 使用defineExpose将组件中的数据交给外部
    defineExpose({name, age})
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>